<template>
	<view class="container">

		<view>
			<u--form labelPosition="left" :model="form" :rules="rules" ref="form" labelWidth='100px'
				:labelStyle='labelStyle'>
				<view class="box">
					<u-form-item label="" prop="jcnr">
						<view class="textarea">
							<text class="title">检查内容</text>
							<view class="tarea">
								<textarea
									style="background-color: #F6F6F6;color: #666666;font-size: 28rpx;border-radius: 8rpx; padding: 24rpx 0 24rpx 10rpx;"
									v-model="form.jcnr" placeholder="请输入……" rows="3"></textarea>
							</view>
						</view>
					</u-form-item>
			
					<dept :label="'负责部门'" :title="'负责部门'" :placeholder="'请选择负责部门'" v-model="form.fzbm" :prop="'fzbm'"></dept>
					<u-form-item label="" prop="jczb">
						<view class="textarea">
							<text class="title">检查指标</text>
							<view class="tarea">
								<textarea
									style="background-color: #F6F6F6;color: #666666;font-size: 28rpx;border-radius: 8rpx; padding: 24rpx 0 24rpx 10rpx;"
									v-model="form.jczb" placeholder="请输入……" rows="3"></textarea>
							</view>
						</view>
					</u-form-item>
					<u-form-item label="预警值" prop="yjz" borderBottom>
						<u--input v-model="form.yjz" placeholder="输入预警值" border="none"></u--input>
					</u-form-item>
					<u-form-item label="联锁值" prop="lsz" borderBottom>
						<u--input v-model="form.lsz" placeholder="输入联锁值" border="none"></u--input>
					</u-form-item>
					<user-pick :label="'检查人'" :multiple="false" :title="'检查人'" :placeholder="'请选择检查人'"
						v-model="form.jcr" :prop="'jcr'"></user-pick>
					<u-form-item label="检查日期" prop="jcrq" borderBottom @click="show=true">
						<u--input v-model="form.jcrq" placeholder="请选择日期" disabledColor="#ffffff" disabled
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-calendar :show="show" @close='show=false' @confirm="confirm"></u-calendar>
					<!-- <u-form-item label="检查人部门" prop="jcrbm">
						<u--input v-model="form.jcrbm" placeholder="输入检查人部门" border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item> -->
					<dept :label="'检查人部门'" :title="'检查人部门'" :placeholder="'请选择检查人部门'" v-model="form.jcrbm" :prop="'jcrbm'"></dept>
					<u-form-item label="" prop="jcjg">
						<view class="textarea">
							<text class="title">检查结果</text>
							<view class="tarea">
								<textarea
									style="background-color: #F6F6F6;color: #666666;font-size: 28rpx;border-radius: 8rpx; padding: 24rpx 0 24rpx 10rpx;"
									v-model="form.jcjg" placeholder="请输入……" rows="3"></textarea>
							</view>
						</view>
					</u-form-item>
					<u-form-item label="检查状态" prop="jcztName" @click="show2=true" borderBottom>
						<u--input v-model="form.jcztName" placeholder="选择检查状态" disabledColor="#ffffff" disabled border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					
					<u-picker :show="show2" :columns="columns2" keyName="label" @confirm='confirm2'
						@cancel='show2=false'></u-picker>
					<u-form-item label="是否保养" prop="sfbyName" borderBottom @click="show1=true">
						<u--input v-model="form.sfbyName" placeholder="选择" disabledColor="#ffffff" disabled border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-picker :show="show1" :columns="columns1" keyName="label" @confirm='confirm1'
						@cancel='show1=false'></u-picker>
					<u-form-item label="检查标准附件上传" borderBottom>
						<view class="imageBigBox" v-for="(item,i) in imageList" :key="i"
						 style="display: flex;justify-content: center;flex-direction: column;align-items: center;">
							<image style="width: 200rpx;height: 200rpx;" @click="previewImg(item)" :src="item"></image>
							<u-icon class="delIcon" style='text-align: center;' name="close-circle" color="#999" size="25" @click="delectImg(i)">
							</u-icon>
						</view>
						<view class="uoloadImg-box" @click="chooseFile" v-if="imageList.length<1">
							<view class="jia"
								style="width: 200rpx;height: 200rpx;display: flex;justify-content: center;align-items: center;">
								<image style="width: 90rpx;height: 80rpx;" src="/static/image/photo.png" mode="">
								</image>
							</view>
						</view>
					</u-form-item>

				</view>
			</u--form>
			<u-button type="primary" text="确认" @click="submit" class='but'></u-button>
		</view>
	</view>
</template>

<script>
	import {
		jcadd,
	} from '@/api/equipment'
	import userPick from "@/pages/Components/userPick";
	import dept from "@/pages/Components/department";
	import {
		URL
	} from '@/api/request.js'
	export default {
		components: {
			userPick,
			dept
		},
		data() {
			return {
				show: false,
				show1: false,
				show2: false,
				labelStyle: {
					color: '#666'
				},
				columns1: [
					[{
						label: '是',
						id: 1
					}, {
						label: '否',
						id: 0
					}]
				],
				columns2: [
					[{
						label: '正常',
						id: 1
					}, {
						label: '异常',
						id: 2
					}]
				],
				imageList: [], //本地上传图片数组
				list: [], //上传后端后返回的图片链接数组
				form: {
					scssid: '',
					jcnr: '',
					fzbm: '',
					jczb: '',
					yjz: '',
					lsz: '',
					jcr: '',
					jcrq: '',
					jcrbm: '',
					jcjg: '',
					jczt: '',
					sfby: '',
					fj: '',
				},
				id: '',
				rules: {
					'jcnr': {
						type: 'string',
						required: true,
						message: '不能为空',
						trigger: ['blur', 'change']
					},
					'fzbm': {
						type: 'string',
						required: true,
						message: '不能为空',
						trigger: ['blur', 'change']
					},
					'jczb': {
						type: 'string',
						required: true,
						message: '不能为空',
						trigger: ['blur', 'change']
					},
					'yjz': {
						type: 'string',
						required: true,
						message: '不能为空',
						trigger: ['blur', 'change']
					},
					'jcr': {
						type: 'string',
						required: true,
						message: '不能为空',
						trigger: ['blur', 'change']
					},
					'lsz': {
						type: 'string',
						required: true,
						message: '不能为空',
						trigger: ['blur', 'change']
					},
					'jcrName': {
						type: 'string',
						required: true,
						message: '不能为空',
						trigger: ['blur', 'change']
					},
					'jcrq': {
						type: 'string',
						required: true,
						message: '不能为空',
						trigger: ['blur', 'change']
					},
					'jcrbm': {
						type: 'string',
						required: true,
						message: '不能为空',
						trigger: ['blur', 'change']
					},
					'jcjg': {
						type: 'string',
						required: true,
						message: '不能为空',
						trigger: ['blur', 'change']
					},
					'jcztName': {
						type: 'string',
						required: true,
						message: '不能为空',
						trigger: ['blur', 'change']
					},
					'sfbyName': {
						type: 'string',
						required: true,
						message: '不能为空',
						trigger: ['blur', 'change']
					},

				},
			};
		},
		onLoad(option) {
			console.log(option.scssid, 6666)
			this.form.scssid = option.scssid
		},
		onShow() {

		},
		methods: {
			async chooseFile() {
				let that = this
				uni.chooseImage({
					count: 1, //图片大于1可以多选,这样可以不超出最大上传值
					sourceType: ['album'],
					success: (res) => {
						this.list = []
						this.imageList = []
						console.log(res.tempFilePaths)
						res.tempFilePaths.forEach(item => {
							that.imageList.push(item)
						})
						that.imageList.forEach(item => {
							this.upImg(item)
						})
					}
				});
			},
			upImg(path) {
				uni.uploadFile({
					url: URL + `/common/upload`,
					filePath: path,
					header: {
						'Authorization': `Bearer ${uni.getStorageSync('token')}`
					},
					name: 'file',
					success: (res) => {
						console.log(JSON.parse(res.data).url)
						this.form.fj = JSON.parse(res.data).url
						this.list.push(this.form.fj)
					}
				});
			},
			//删除图片
			delectImg(i) {
				uni.showModal({
					title: '提示',
					content: '确定要删除照片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imageList.splice(i, 1)
							this.list.splice(i, 1)

						}
						this.form.xgfj = null
					}
				})
			},
			//点击预览图片
			previewImg(current) {
				uni.previewImage({
					current,
					urls: this.imageList, //存放图片的数组
					loop: true,
					indicator: "default"
				})
			},

			// 选择日期
			confirm(val) {
				this.form.jcrq = val[0].replace(new RegExp("-", "gm"), "");
				this.show = false
			},
			// 是否保养
			confirm1(val) {
				console.log(val);
				this.form.sfby = val.value[0].id
				this.form.sfbyName = val.value[0].label
				this.show1 = false
			},
			// 检查状态
			confirm2(val) {
				this.form.jczt = val.value[0].id
				this.form.jcztName = val.value[0].label
				this.show2 = false
			},
			submit() {
				console.log(this.form, 66666)
				
				this.$refs.form.validate().then(res => {
					uni.$u.toast('校验通过')
					jcadd(this.form)
					.then(res => {
						console.log(789)
						uni.$u.toast('新增成功')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					
					})
					.catch(errors => {
						console.log(errors)
						uni.$u.toast(errors)
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.container {
		padding: 0 24rpx;
		background-color: #f6f6f6;

		.title {
			font-size: 28rpx;
			font-weight: 500;
			line-height: 44rpx;
			padding: 20rpx 0;
		}

		.box {
			padding: 0rpx 48rpx;
			background-color: #fff;
			border-radius: 20rpx;
		}

		.textarea {

			.one {
				font-size: 28rpx;
				color: #999999;
			}

			.tarea {
				margin-top: 16rpx;
			}
		}
	}

	.but {
		margin: 30rpx 0;
	}
</style>
